<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/template/TCubeTTATemplate.xhtml">

    <ui:define name="contentInsert">
        <h3><h:outputText value="Sales By Age Group" /></h3>
        <br/>
        <p:panel style="background:whitesmoke">
            <h:panelGrid columns="2">
                <h:form>
                    <h:panelGrid columns="3">
                        <h:outputText value="Display Options:"/>
                        <h:selectOneMenu value="#{mdsTCubeMB.salesByAgeChart}"> 
                            <f:selectItem itemLabel="Pie Chart" itemValue="1"/>
                            <f:selectItem itemLabel="Bar Chart" itemValue="2"/>
                            <f:selectItem itemLabel="Column Chart" itemValue="3"/>
                            <p:ajax update="salesByAgeForm"   
                                    listener="#{mdsTCubeMB.chartTypeUpdate()}" />
                        </h:selectOneMenu>
                    </h:panelGrid>
                </h:form>
                <h:form>
                    <h:selectOneMenu value="#{mdsTCubeMB.salesByAgeTimeWithin}">
                        <f:selectItems value="#{mdsTCubeMB.timeOptions}"/>
                        <p:ajax update="salesByAgeForm"
                                listener="#{mdsTCubeMB.salesByAgeContentUpdate()}"/>
                    </h:selectOneMenu>
                </h:form>
            </h:panelGrid>
        </p:panel>
        <h:form id="salesByAgeForm">
            <c:if test="${mdsTCubeMB.salesByAgeChart == 1}">
                <br/>
                <p:pieChart 
                    model="#{mdsTCubeMB.salesByAgeModel}"
                    style="piechartStyle" width="100%" height="400px"/>
            </c:if>
            <c:if test="${mdsTCubeMB.salesByAgeChart == 2}">
                <br/>
                <p:barChart model="#{mdsTCubeMB.salesByAgeCartesian}"
                            width="100%" height="500px"
                            titleX="Sales" titleY="Age"/>
            </c:if>
            <c:if test="${mdsTCubeMB.salesByAgeChart == 3}"> 
                <br/>
                <p:columnChart model="#{mdsTCubeMB.salesByAgeCartesian}"
                                width="100%" height="400px"
                               titleX="Age" titleY="Sales"/>
            </c:if>
        </h:form>

        <h3><h:outputText value="Sales By Country" /></h3>
        <br/>
        <p:panel style="background:whitesmoke">
            <h:panelGrid columns="3">
                <h:form>
                    <h:panelGrid columns="2">
                        <h:outputText value="Display Options:"/>
                        <h:selectOneMenu value="#{mdsTCubeMB.salesByCountryChart}"> 
                            <f:selectItem itemLabel="Pie Chart" itemValue="1"/>
                            <f:selectItem itemLabel="Bar Chart" itemValue="2"/>
                            <f:selectItem itemLabel="Column Chart" itemValue="3"/>
                            <p:ajax update="salesByCountryForm"   
                                    listener="#{mdsTCubeMB.chartTypeUpdate()}" />
                        </h:selectOneMenu>
                    </h:panelGrid>
                </h:form>
                <h:form>
                    <h:selectOneMenu value="#{mdsTCubeMB.numCountry_SalesByCountry}"> 
                        <f:selectItem itemLabel="Top 5 countries" itemValue="5"/>
                        <f:selectItem itemLabel="Top 10 countries" itemValue="10"/>
                        <f:selectItem itemLabel="Top 15 countries" itemValue="15"/>
                        <f:selectItem itemLabel="All countries" itemValue="57"/>
                        <p:ajax update="salesByCountryForm"   
                                listener="#{mdsTCubeMB.salesByCountryCountentUpdate()}" />
                    </h:selectOneMenu>
                </h:form>
                <h:form>
                    <h:selectOneMenu value="#{mdsTCubeMB.salesByCountryTimeWithin}">
                        <f:selectItems value="#{mdsTCubeMB.timeOptions}"/>
                        <p:ajax update="salesByCountryForm"
                                listener="#{mdsTCubeMB.salesByCountryCountentUpdate()}"/>
                    </h:selectOneMenu>
                </h:form>
            </h:panelGrid>
        </p:panel>
        <h:form id="salesByCountryForm">
            <c:if test="${mdsTCubeMB.salesByCountryChart == 1}">
                <br/>
                <p:pieChart model="#{mdsTCubeMB.salesByCountryModel}"
                            style="piechartStyle" width="100%" height="400px"/>
            </c:if>
            <c:if test="${mdsTCubeMB.salesByCountryChart == 2}">
                <br/>
                <p:barChart model="#{mdsTCubeMB.salesByCountryCartesian}"
                             width="100%" height="500px"
                            titleX="Sales" titleY="Country"/>
            </c:if>
            <c:if test="${mdsTCubeMB.salesByCountryChart == 3}">
                <br/>
                <p:columnChart model="#{mdsTCubeMB.salesByCountryCartesian}"
                                width="100%" height="400px"
                               titleX="Country" titleY="Sales"/>
            </c:if>
        </h:form>

        <h3><h:outputText value="Reservation By Age" /></h3>
        <br/>
        <p:panel style="background:whitesmoke">
            <h:panelGrid columns="2">
                <h:form>
                    <h:outputText value="Display Options:"/>
                    <h:selectOneMenu value="#{mdsTCubeMB.reservationByAgeChart}"> 
                        <f:selectItem itemLabel="Pie Chart" itemValue="1"/>
                        <f:selectItem itemLabel="Bar Chart" itemValue="2"/>
                        <f:selectItem itemLabel="Column Chart" itemValue="3"/>
                        <p:ajax update="reservationByAgeForm"   
                                listener="#{mdsTCubeMB.chartTypeUpdate()}" />
                    </h:selectOneMenu>
                </h:form>
                <h:form>
                    <h:selectOneMenu value="#{mdsTCubeMB.reservationByAgeTimeWithin}">
                        <f:selectItems value="#{mdsTCubeMB.timeOptions}"/>
                        <p:ajax update="reservationByAgeForm"
                                listener="#{mdsTCubeMB.resByAgeContentUpdate()}"/>
                    </h:selectOneMenu>
                </h:form>
            </h:panelGrid>
        </p:panel>
        <h:form id="reservationByAgeForm">
            <c:if test="${mdsTCubeMB.reservationByAgeChart == 1}">
                <br/>
                <p:pieChart model="#{mdsTCubeMB.reservationByAgeModel}"
                            style="piechartStyle" width="100%" height="400px"/>
            </c:if>
            <c:if test="${mdsTCubeMB.reservationByAgeChart == 2}">
                <br/>
                <p:barChart model="#{mdsTCubeMB.reservationByAgeCartesian}"
                            width="100%" height="500px"
                            titleX="#Reservations" titleY="Age"/>
            </c:if>
            <c:if test="${mdsTCubeMB.reservationByAgeChart == 3}">
                <br/>
                <p:columnChart model="#{mdsTCubeMB.reservationByAgeCartesian}"
                               width="100%" height="400px"
                               titleX="Age" titleY="#Reservations"/>
            </c:if>
        </h:form>

        <h3><h:outputText value="Reservation By Country" /></h3>
        <br/>
        <p:panel style="background:whitesmoke">
            <h:panelGrid columns="3">
                <h:form>
                    <h:outputText value="Display Options:"/>
                    <h:selectOneMenu value="#{mdsTCubeMB.reservationByCountryChart}"> 
                        <f:selectItem itemLabel="Pie Chart" itemValue="1"/>
                        <f:selectItem itemLabel="Bar Chart" itemValue="2"/>
                        <f:selectItem itemLabel="Column Chart" itemValue="3"/>
                        <p:ajax update="reservationByCountryForm"   
                                listener="#{mdsTCubeMB.chartTypeUpdate()}" />
                    </h:selectOneMenu>
                </h:form>
                <h:form>
                    <h:selectOneMenu value="#{mdsTCubeMB.numCountry_ResByCountry}"
                                     tabindex="2"> 
                        <f:selectItem itemLabel="Top 5 countries" itemValue="5"/>
                        <f:selectItem itemLabel="Top 10 countries" itemValue="10"/>
                        <f:selectItem itemLabel="Top 15 countries" itemValue="15"/>
                        <f:selectItem itemLabel="All countries" itemValue="57"/>
                        <p:ajax update="reservationByCountryForm"   
                                listener="#{mdsTCubeMB.resByCountryContentUpdate()}" />
                    </h:selectOneMenu>
                </h:form>
                <h:form>
                    <h:selectOneMenu value="#{mdsTCubeMB.reservationByCountryTimeWithin}">
                        <f:selectItems value="#{mdsTCubeMB.timeOptions}"/>
                        <p:ajax update="reservationByCountryForm"
                                listener="#{mdsTCubeMB.resByCountryContentUpdate()}"/>
                    </h:selectOneMenu>
                </h:form>
            </h:panelGrid>

        </p:panel>
        <h:form id="reservationByCountryForm">
            <c:if test="${mdsTCubeMB.reservationByCountryChart == 1}">
                <br/>
                <p:pieChart model="#{mdsTCubeMB.reservationByCountryModel}"
                            style="piechartStyle" width="100%" height="400px"/>
            </c:if>
            <c:if test="${mdsTCubeMB.reservationByCountryChart == 2}">
                <br/>
                <p:barChart model="#{mdsTCubeMB.reservationByCountryCartesian}"
                            width="100%" height="500px"
                            titleX="#Reservations" titleY="Country"/>
            </c:if>
            <c:if test="${mdsTCubeMB.reservationByCountryChart == 3}">
                <br/>
                <p:columnChart model="#{mdsTCubeMB.reservationByCountryCartesian}"
                               width="100%" height="400px"
                               titleX="Country" titleY="#Reservations"/>
            </c:if>
        </h:form>

        <h3><h:outputText value="Transactions By Demographic Profile" /></h3>
        <br/>
        <p:panel style="background:whitesmoke">
            <h:panelGrid columns="3">
                <h:form>
                    <h:outputText value="Display Options:"/>
                    <h:selectOneMenu value="#{mdsTCubeMB.topClusterChart}"> 
                        <f:selectItem itemLabel="Pie Chart" itemValue="1"/>
                        <f:selectItem itemLabel="Bar Chart" itemValue="2"/>
                        <f:selectItem itemLabel="Column Chart" itemValue="3"/>
                        <p:ajax update="topClusterForm"   
                                listener="#{mdsTCubeMB.chartTypeUpdate()}" />
                    </h:selectOneMenu>
                </h:form>
                <h:form>
                    <h:selectOneMenu value="#{mdsTCubeMB.numCluster_TopCluster}"> 
                        <f:selectItem itemLabel="Top 5 clusters" itemValue="5"/>
                        <f:selectItem itemLabel="Top 10 clusters" itemValue="10"/>
                        <f:selectItem itemLabel="Top 15 clusters" itemValue="15"/>
                        <f:selectItem itemLabel="Top 20 clusters" itemValue="20"/>
                        <p:ajax update="topClusterForm"   
                                listener="#{mdsTCubeMB.clusterContentUpdate()}" /> 
                    </h:selectOneMenu>
                </h:form>
                <h:form>
                    <h:selectOneMenu value="#{mdsTCubeMB.topClusterTimeWithin}">
                        <f:selectItem itemLabel="Past 2 Years" itemValue="2"/>
                        <f:selectItem itemLabel="From the Beginning of Time" itemValue="0"/>
                        <p:ajax update="topClusterForm"
                                listener="#{mdsTCubeMB.clusterContentUpdate()}"/>
                    </h:selectOneMenu>
                </h:form>
            </h:panelGrid>
        </p:panel>
        <h:form id="topClusterForm">
            <c:if test="${mdsTCubeMB.topClusterChart == 1}">
                <br/>
                <p:pieChart model="#{mdsTCubeMB.topClusterModel}"
                            style="piechartStyle" width="100%" height="400px"/>
            </c:if>
            <c:if test="${mdsTCubeMB.topClusterChart == 2}">
                <br/>
                <p:barChart model="#{mdsTCubeMB.topClusterCartesian}"
                            width="100%" height="500px"
                            titleX="#Transactions" titleY="Demography"/>
            </c:if>
            <c:if test="${mdsTCubeMB.topClusterChart == 3}">
                <br/>
                <p:columnChart model="#{mdsTCubeMB.topClusterCartesian}"
                               width="100%" height="400px"
                               titleX="Demography" titleY="Transactions"/>
            </c:if>
        </h:form>
    </ui:define>
</ui:composition>
